<template>
  <div class="pipeline-running">
    <div class="header">
      <div class="title">
        <span class="title-text">流水线</span>
        <span class="title-name ellipsis">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ pipelineData.name }}</span>
            </template>
            {{ pipelineData.name }}
          </a-tooltip>
        </span>
        <span class="title-icon" @click="starPipeline">
          <SvgIcon class="iconDef" name="star" :color="starColor" width="16" height="16" />
        </span>
      </div>
      <div class="tabs">
        <BasicTabs
          :tabsList="tabList"
          @handle-change="changeTab"
          :tabsValue="activeTab"
          :rightTabs="rightTabs"
          @delete-tab="deleteTab"
        />
      </div>
      <div class="btn-list">
        <a-button class="default-button btn-class" :loading="runPipelineLoading" @click="runPipeline">
          <template #icon>
            <SvgIcon class="iconDef" :name="'play-save'" :color="'#fff'" width="16" height="16" />
          </template>
          运行
        </a-button>
        <a-button
          class="default-button btn-font"
          @click="goEdit"
          v-if="pipelineData.applicationCode"
          v-auth="[
            { objectId: pipelineData.componentCode, objectType: ResourceType.component, role: Role.manager },
            { objectId: pipelineData.applicationCode, objectType: ResourceType.app, role: Role.manager },
          ]"
        >
          <template #icon>
            <SvgIcon class="iconDef" name="edit" width="16" height="16" />
          </template>
          编辑
        </a-button>
        <a-button class="default-button btn-font" @click="back">
          <template #icon>
            <SvgIcon class="iconDef" name="left-arrow" width="16" height="16" />
          </template>
          返回
        </a-button>
      </div>
    </div>
    <div :style="{ boxShadow: '0px 1px 0px 0px #e7eff8', width: '100%' }"></div>
    <div v-if="activeTab === 'runDetails'" class="box-content">
      <Detail ref="detailRef" :pipeline-code="$route.params.code as string" :flag="flag" />
    </div>
    <div v-if="activeTab === 'runHistory'" class="box-content">
      <runHistory @go-run-detail="goRunDetail" />
    </div>
    <div v-if="activeTab === 'editHistory'" class="box-content"></div>
    <!-- 右侧以pipelineCode作为key值的tabs才能加载 -->
    <div v-if="rightTabs.map((item) => item.key).includes(activeTab)" class="box-content">
      <Detail :pipeline-code="activeTab" :key="activeTab" :flag="flag" />
    </div>
  </div>
  <TriggerPipelineModal ref="triggerPipelineModal" @handle-success="handleTriggerPipelineSuccess" />
</template>
<script setup lang="ts">
import runHistory from './runHistory.vue';
import Detail from './detail.vue';
import { PipelineFlag, ResourceType, Role } from '@/enums/pipelineEnum';
import TriggerPipelineModal from '@/views/applicationManagement/components/modules/tables/triggerPipelineModal.vue';
import { usePipeline } from '../pipelineHooks';
const { pipelineData, pipelineCode, starPipeline, fetchPipelineInfo, starColor } = usePipeline();
const router = useRouter();
const route = useRoute();
const activeTab = ref('runDetails');
const runPipelineLoading = ref(false);
const flag = ref(PipelineFlag.pipeline);
const triggerPipelineModal = ref();
const detailRef = ref();
const tabList: CommonTypes.TabItem[] = [
  {
    key: 'runDetails',
    name: '运行详情',
  },
  {
    key: 'runHistory',
    name: '运行历史',
  },
  // {
  //   key: 'editHistory',
  //   name: '修改历史',
  // },
];

onBeforeMount(async () => {
  activeTab.value = (route.params.tabName as string) || tabList[0].key;
  pipelineCode.value = route.params.code as string;
  await fetchPipelineInfo();
});

const rightTabs = ref<CommonTypes.TabItem[]>([]);

const handleTriggerPipelineSuccess = () => {
  activeTab.value = 'runDetails';
  flag.value = PipelineFlag.pipeline;
  nextTick(() => {
    detailRef.value.refresh(true);
  });
};

//运行历史跳转添加tabs, 手动添加的activeTab需要以pipelineCode作为key值
const goRunDetail = (obj: any) => {
  const array = [...rightTabs.value, { name: obj.buildNumber, key: obj.instanceCode }];
  rightTabs.value = array.reduce<CommonTypes.TabItem[]>((prev, current) => {
    const exists = prev.some((obj) => obj.key == current.key);
    if (!exists) prev.push(current);
    return prev;
  }, []);
  activeTab.value = obj.instanceCode;
  flag.value = PipelineFlag.instance;
};

const changeTab = (key: string) => {
  if (key == 'runDetails') {
    flag.value = PipelineFlag.pipeline;
  } else {
    flag.value = PipelineFlag.instance;
  }
  activeTab.value = key || tabList[1].key;
};

// 移除tabs后的数组
const deleteTab = (list: CommonTypes.TabItem[]) => {
  rightTabs.value = list;
  if (rightTabs.value.length == 0) {
    changeTab(tabList[1].key);
  }
};

const back = () => {
  router.go(-1);
};

//编辑流水线
const goEdit = () => {
  router.push(`/system/pipelineConfig/${route.params.code}`);
};

//运行
const runPipeline = async () => {
  triggerPipelineModal.value.showModal({ pipelineCode: route.params.code });
};
</script>
<style lang="less" scoped>
.pipeline-running {
  background-color: #fff;
  height: 100%;
  .header {
    height: 60px;
    box-shadow: 0px 1px 0px 0px rgba(231, 239, 248, 1);
    border-radius: 4px 4px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 40px;
    .title {
      font-weight: 400;
      width: fit-content;
      display: flex;
      align-items: center;
      &-text {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.8);
      }
      &-name {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.4);
        max-width: 162px;
        display: inline-block;
        margin-left: 10px;
      }
      &-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        cursor: pointer;
      }
      &::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 24px;
        margin-left: 24px;
        background-color: #e7eff8;
      }
    }
    .tabs {
      flex: 1;
      margin-left: 20px;
      max-width: 75%;
      overflow: hidden;
      :deep(.ant-tabs-tab) {
        padding: 20px 0;
      }
      :deep(.ant-tabs-nav::before) {
        border: none;
      }
      :deep(.ant-tabs-nav) {
        margin-bottom: 0;
      }
    }
    .btn-list {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 16px;
      .default-button {
        border: 1px solid rgba(216, 232, 248, 1);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        align-items: center;
        color: #fff;
        gap: 8px;
      }
      .btn-font {
        color: #2590ff;
      }
      .btn-class {
        background-color: #2590ff;
      }
    }
  }
  .box-content {
    margin-top: 2px;
    // padding: 18px 20px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    height: calc(100% - 62px);
  }
  .iconClass {
    color: #fff;
  }
}
</style>
